<template>
	<view class="order-list">
		<view class='title-list'>
			<view :class="current == 0 ? 'current': ''" @click="clickTitle(0)">全部订单</view>
			<view :class="current == 1 ? 'current': ''" @click="clickTitle(1)">定金待支付</view>
			<view :class="current == 2 ? 'current': ''" @click="clickTitle(2)">尾款待支付</view>
			<view :class="current == 3 ? 'current': ''" @click="clickTitle(3)">已支付</view>
			<view :class="current == 4 ? 'current': ''" @click="clickTitle(4)">退款</view>
			<view class='line' :style="'left: ' + positionLeft[current]"></view>
		</view>
		<view class='list-box'>
			<scroll-view :style="'height:'+windowHeight + 'rpx'" scroll-y="true" class="scroll-Y"
				@scrolltolower="scrolltolower">
				<view class="scroll-view-item">
					<view class='list-item' v-for='item in dataList' :key='item.id'>
						<view :class='item.orderFlag == 1 ? "item-title before": "item-title"'
							:style='item.orderFlag == 1 ? "color: #ADB0AE": ""'>
							{{item.orderCancelFlag && (item.orderCancelFlag != 3) ? getCancelStatusText(item.orderCancelFlag): ((item.orderFlag == 1) && (item.currentPayType == 1) ? '定金待支付': ((item.orderFlag == 2) && (item.currentPayType == 3) ? '尾款已支付': getStatusText(item.orderFlag)))}}
						</view>
						<image mode='widthFix' :src='item.carConfig.configurePic' />
						<view class='item-name'>{{item.carConfig.modelName}}</view>
						<view class='item-sub'>
							<view class='sub-list'>{{item.carConfig.modelConfigureName}} | </view>
							<view class='sub-list'>{{item.carConfig.colorName}}</view>
						</view>
						<view class='item-price'>
							<view class='color'>{{item.currentPayType != 3 ? "定金：" : ""}}</view>
							￥{{item.currentPayType != 3 ? item.depositAmount: item.orderAmount}}
						</view>
						<view class='item-btn'>
							<view class='btn-date'>{{item.createTime}}</view>
							<view class='btn-detail' @click="toOrderDetail(item.id)">
								{{item.orderFlag !== 1 ? '查看': ''}}详情</view>
							<view class='btn-pay' v-if='item.orderFlag == 1' @click='toPay(item)'>去支付</view>
						</view>
					</view>
				</view>
				<view v-if="params.pageEnd && dataList.length" class="end">全部加载完毕</view>
				<empty v-if='!dataList.length' text='暂无订单数据' />
			</scroll-view>
		</view>
		<u-modal :show="warnShow" content='若订单状态变更为订单已审批，则您的车辆已进入排产阶段，将无法取消订单及退款' confirmText='我已知晓'
			confirmColor='#EA5404' @confirm='confirmToPay'></u-modal>
	</view>

</template>

<script>
	const app = getApp();
	import empty from '@components/empty/empty.vue'
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		components: {
			empty
		},
		data() {
			return {
				current: 0,
				windowHeight: 0,
				dataList: [],
				positionLeft: ['9.5%', '31%', '55%', '75.5%', '90.5%'],
				params: {
					pageNum: 1,
					pageSize: 5,
					pageEnd: false
				},
				statusList: [{
						text: '定金待支付',
						value: 1
					},
					{
						text: '订单审批中',
						value: 2
					}, // 定金已支付
					{
						text: '订单已审批',
						value: 3
					},
					{
						text: '计划生产',
						value: 4
					},
					{
						text: '生产中',
						value: 5
					},
					{
						text: '已入库',
						value: 6
					},
					{
						text: '已入库',
						value: 7
					},
					{
						text: '已发货',
						value: 8
					},
					{
						text: '已到店',
						value: 9
					},
					{
						text: '待评价',
						value: 10
					},
					{
						text: '待评价',
						value: 11
					},
					{
						text: '已完成',
						value: 12
					},
					{
						text: '订单已取消',
						value: 13
					},
					{
						text: '订单关闭',
						value: 14
					},
					// {text: '退款成功', value: 15},
					// {text: '不予退款', value: 16},
				],
				cancelStatusList: [{
						text: '退款申请中',
						value: 1
					},
					{
						text: '退款申请中',
						value: 2
					},
					{
						text: '驳回',
						value: 3
					},
					{
						text: '退款成功',
						value: 4
					},
					{
						text: '退款申请中',
						value: 5
					},
				],
				warnShow: false,
				toPayItem: null
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'getSystemInfo');
					let clientHeight = res.windowHeight - 44;
					let clientWidth = res.windowWidth;
					let ratio = 750 / clientWidth; //计算为百分比
					let rpxHeight = ratio * clientHeight;
					that.windowHeight = rpxHeight;
					console.log('rpxHeight', rpxHeight)
					that.navigationBarHeight = res.statusBarHeight + 'px'

				}
			})
		},
		onShow: function() {
			this.getList(1, this.current)
		},
		methods: {
			getStatusText(value) {
				let text = null
				this.statusList.forEach(item => {
					if (item.value == value) {
						text = item.text
					}
				})
				return text
			},
			getCancelStatusText(value) {
				let text = null
				this.cancelStatusList.forEach(item => {
					if (item.value == value) {
						text = item.text
					}
				})
				return text
			},
			scrolltolower() {
				console.log('scrolltolower')
				this.getList(this.params.pageNum, this.current)
			},
			getList(pageNum, status) {
				if (pageNum == 1) {
					this.dataList = [];
					this.params.pageNum = 1;
					this.params.pageEnd = false
				}
				let url = app.globalData.config.interfaces.URL_GET_CARORDER_PAGE
				let params = {
					"pageNum": pageNum,
					"pageSize": this.params.pageSize,
					"userId": app.globalData.userInfo.id,
					orderExtFlag: status ?? null
				};
				if (this.params.pageEnd) return
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.dataList = this.dataList.concat(res.data.list)
						if (!res.data.list.length) {
							this.params.pageEnd = true;
							return
						}
						this.params.pageNum++
					}
				})
			},
			clickTitle(current) {
				if (current == this.current) return
				this.current = current
				this.getList(1, current)
			},
			toOrderDetail(id) {
				uni.navigateTo({
					url: `/module_my/pages/orderDetail/orderDetail?id=${id}`
				});
			},
			toPay(item) {
				let _this = this
				_this.warnShow = true
				_this.toPayItem = item
				// uni.showModal({
				// 	title: '',
				// 	content: '若订单状态变更为订单已审批，则您的车辆已进入排产阶段，将无法取消订单及退款',
				// 	confirmColor: '#EA5404',
				// 	confirmText: '我已知晓',
				// 	showCancel: false,
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url: `/module_my/pages/orderList/payment/payment?id=${item.id}&currentPayType=${item.currentPayType}&money=${item.currentPayType == 1 ? item.depositAmount: item.orderAmount}&expireTime=${item.expireTime}`
				// 			});
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// });
			},
			confirmToPay: function() {
				var that = this
				uni.navigateTo({
					url: `/module_my/pages/orderList/payment/payment?id=${that.toPayItem.id}&currentPayType=${that.toPayItem.currentPayType}&money=${that.toPayItem.currentPayType == 1 ? that.toPayItem.depositAmount: that.toPayItem.orderAmount}&expireTime=${that.toPayItem.expireTime}`
				});
				that.toPayItem = null
				that.warnShow = false
			}

		},
	}
</script>

<style>
	@import "./orderList.css";
</style>
